<template>
    <SettingWrap :list="list" placement="left" >
      <template v-slot:default="{activeName}">
        <Page v-if="activeName === 'page'" />
        <Title v-else-if="activeName === 'title'" />
      </template>
    </SettingWrap>
</template>

<script >
import Page from "./Page"
import Title from "./Title"
import SettingWrap from "../../../common/SettingWrap"

export default {
  data() {
    return {
      list: [
        {
          icon: "setting",
          title: "页面设置",
          id: "page",
          isShow: true,
          content: Page
        },
        {
          icon: "project",
          title: "全局标题设置",
          id: "title",
          isShow: true,
          content: Page
        },

      ],
      title: "",
      isShow: false,
      activeName: undefined
    }
  },
  methods: {
    handleClick({id, title}){
      this.activeName = id
      this.title = title
    },
    handleClose(){
      this.activeName = undefined
    }
  },
  components: {
    Page,
    Title,
    SettingWrap
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
